<template>
	<view class="w100 flex flex_jc flex_wrap">
		
		<!-- 格子广告 -->
		<view class="grid_left">
			<ad-custom :unit-id="xcx_ad.GridLeftId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="grid_right" :style="{left: (_windowWidth-70)+'px'}">
			<ad-custom :unit-id="xcx_ad.GridRightId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view>
			<navigator :url="'/pages/discussion_detail/index?id='+item.id" class="w710 li flex flex_wrap" v-for="(item,index) in list">
				<view class="title">{{item.name}}</view>
				<view class="tags w100 flex">
					<view class="tag mr10" v-if="item.is_hot">热门</view>
					<view class="tag mr10 color1" v-if="item.is_recommend">推荐</view>
				</view>
			
				<view class="imgs mt10">
					<image v-for="(item2,index2) in item.imgs" mode="heightFix" :src="item2"></image>
				</view>
				
				<view class="reply mt10 fz25 flex flex_ac">
					<view class="v1 hidden1">{{item.listcomments[0].content}}</view>
					<image class="avatar" :src="item.listcomments[0].avatar"></image>
					<view class="v2 hidden1 col_999">{{item.listcomments[0].nickname}}</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import adSdk from "@/utils/advertise.js"	
	import {getDiscussionList} from "@/api/api"
	export default {
		data() {
			return {
				page:1,
				list:[],
				count:0,
				tips:'数据加载中',
				_windowWidth:getApp().globalData._windowWidth,
				_windowHeight:getApp().globalData._windowHeight,
			}
		},
		
		
		onLoad: function (option) {
			this.getDiscussionList()
		},
		
		onShow:function(){
			adSdk.initInterstitial(this.xcx_ad.interstitialId)
			adSdk.showInterstitial()
		},
		
		onReachBottom(){
			if(this.list.length>=this.count){
				this.tips = '所有数据加载完成'
			}else{
				this.page += 1
				this.getBaoluList()
			}
		},
	
		methods:{
			
			getDiscussionList(){
				getDiscussionList(this.page).then(res=>{
					if(res.code==0){
						this.count = res.data.total
						for(var i=0;i<res.data.data.length;i++){
							this.list.push(res.data.data[i])
						}
						if(this.list.length>=this.count){
							this.tips = '所有数据加载完成'
						}
					}
				})
			},
		}
	}
</script>
<style>
	.u-transition{width: 100%;height: 100%;}
	page{background-color: #FFFFFF;}
</style>
<style scoped>
	.reply .avatar{width: 40rpx;height: 40rpx;border-radius: 100%;overflow: hidden;margin-left: 10rpx;}
	.reply .v1{width: 550rpx;}
	.reply .v2{width: 130rpx;margin-left: 10rpx;}
	.reply{color: #666;}
	.imgs image{height: 150rpx;margin-right: 10rpx;}
	.color1{background-color: #1cddf2!important;}
	.tag{padding: 5rpx 10rpx;background-color: red;font-size: 20rpx;color: #FFFFFF;border-radius: 5rpx;}
	.tags{margin-top: 10rpx;}
	.li{font-size: 40rpx;font-weight: bold;margin-top: 30rpx;padding-bottom: 30rpx;border-bottom:1px solid #F5F5F5;}
</style>